<template>
    <div id='tmpl'>
        <!--1.0 实现提交评论的静态结构-->
        <div id="postcomment">
            <h3>提交评论</h3>
            <hr>
            <textarea placeholder="请输入评论内容" v-model='content'></textarea>
            <mt-button type='primary' size='large' @click='postcomment'>发表</mt-button>
        </div>

        <!--2.0 实现获取评论数据列表-->
        <div id="list">
            <h3>评论列表</h3>
            <hr>
            <!--使用mui组件中的普通列表功能-->
            <div v-for='(item,index) in list'>
                <div class="title">
                    <span>第{{index + 1}}楼</span>
                    <span>用户:{{item.user_name}}</span>
                    <span>发表时间:{{item.add_time | datafmt('YYYY-MM-DD HH:mm:ss')}}</span>
			    </div>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell" v-text='item.content'></li>
                </ul>
            </div>
        </div>

        <!--实现获取更多按钮-->
        <mt-button type='primary' size='large' plain @click='getmore'>加载更多</mt-button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            pageindex:1,    //获取api中的第几页评论数据
            content:"" ,    // 用来自动获取用户填写的评论内容
            list:[]
        }
    },
    props:['id'],         //作业是用来接受父组件传入过来的id值    
    created(){
        //获取当前新闻列表的评论信息列表,页面一打开默认获取第一页数据
        this.getcommentlist(1);
    },
    methods:{
        // 1.0 实现提交评论数据的ajax请求
        postcomment:function(){               //可以写成postcomment(){}
            // 判断用户是否填写评论内容
            if(this.content.trim().length <= 0){
                this.$tip('您评论的内容为空');
                return;
            }
            //向服务器提交评论
            var url = this.$common.apidomain+'/api/postcomment/'+this.id;
            this.$http.post(url,{content:this.content},{emulateJSON:true})
            .then(function(response){
                this.$tip(response.body.message)
            })

            //每次提交评论的时候,都需要刷新一下才能将评论内容显示出来,这样用户体验不好,现在需求是:只要点击发表,评论内容就可以实时添加到下面的列表中,如果是直接调用这个this.getcommentlist(this.pageindex)虽然也能刷新,如果用户已经看到后面几页的评论了,然后发表的评论,这样一刷新,又会从第一页的评论开始,这样用户体验还是不好,所以采用下面的方法,为了把评论内容显示到最前面,所以需要把原先的list数组和刚刚评论的内容进行连接
            this.list = [{
                "user_name": "匿名用户",
                "add_time": new Date(),
                "content":this.content
             }].concat(this.list);
        
            //提交完之后把内容情况
            this.content = "";
        },

        //2.0 实现获取评论数据列表的ajax请求
        //pageindex:代表的是当前获取的是哪一页的数据,默认值是1
        getcommentlist(pageindex){   
            //如果pageindex 没有值默认就是1
            pageindex = pageindex || 1;
            var url = this.$common.apidomain+'/api/getcomments/'+this.id+'?pageindex='+pageindex;
            this.$http.get(url).then(function(response){
                var data = response.body;
                if(data.status !== 0){
                    this.$tip(data.message);
                    return;
                }
                // this.list = data.message;
                //要实现评论的追加,必须要把当前this.pageindex值对应的分页数据(数组),用concat方法,把2个数组结合起来
                // this.list = this.list.concat(data.message);
                //另一种方法也可以实现两个数组的合并
                [].push.apply(this.list,data.message);
            })
        },

        //3.0 实现评论加载更多的ajax请求
        getmore(){
            //每点一次让pageindex值加1
            this.pageindex++;
            //点击的时候,获取当前this.pageindex值对应的分页数据
            this.getcommentlist(this.pageindex);
             
        }
    }
}
</script>
<style scoped>
    /*评论提交样式*/
    #postcomment{
        padding:5px;
    }

    /*评论列表样式*/
    .title{
        color: #6d6d72;
        font-size: 15px;
        background-color: rgba(0,0,0,0.1);
        padding:5px;
	}
    #list{
        padding:5px;
    }

</style>